<template>
  <div class="viewpage">
    <div class="title">
      知识全栈
    </div>

    <div class="content">
      <template v-for="item in data">
        <div class="card">
          <span class="card-name" @click="goTo(item.url)">{{ item.name }}</span>
          <span v-if="item.type === '工具'" class="card-data">{{ item.data ? item.data : 'NaN' }}</span>
          <span v-if="item.type === '个人'" :class="(item.state ? 'card-state-green' : 'card-state')"></span>
          <div class="card-info">{{ item.description }}</div>
        </div>
      </template>
    </div>

    <div class="footer">
      <div>Copyright © {{ copyrightYear }} 知识全栈 {{ 'v3.2' }}</div>
      <div>hi@zsuuu.com</div>
      <div @click="goTo('https://beian.miit.gov.cn/')" style="cursor: pointer;">备案号：湘ICP备2020021251号</div>
      <div>访问次数：{{ vCount }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { projects, type Project } from './project';
import { onMounted, ref } from 'vue';
const vCount = ref(0)
const copyrightYear = ref(0)
const data = ref(projects)
// 根据url进行请求，判断网页是否存在
const getUrl = async (item: Project) => {
  const url = item.url;
  if (item.type === '个人') {
    try {
      await fetch(url, {
        method: 'HEAD', // 只请求头部信息，减少数据传输
        mode: 'no-cors' // 绕过CORS限制（但只能检测网络连通性）
      });
      // 如果能收到响应，即使状态码不是200也认为可访问
      item.state = true;
    } catch (error) {
      item.state = false;
    }
  } else if (item.type === '工具') {
    const response = await fetch(item.url);
    if (!response.ok) return;
    const data = await response.json();
    item.data = data;
  }
};

const goTo = (url: string) => {
  window.open(url)
}

const visitorCount = async () => {
  const url = 'https://api.zsuuu.com/addone'
  const response = await fetch(url);
  if (!response.ok) return;
  const data = await response.json();
  vCount.value = data;
}

onMounted(() => {
  // 将data中的数据更新
  data.value.forEach((item) => {
    getUrl(item)
  })
  visitorCount()
  // 获取当前的年份
  const year = new Date().getFullYear();
  copyrightYear.value = year;
})
</script>

<style scoped lang="less">
.viewpage {
  /** 水平居中 */
  margin: 0 auto;
  /** 垂直居中 */
  position: relative;
  /** 设置宽度 */
  width: 100%;
  min-height: 100vh;
  background-color: var(--black);

  .title {
    font-size: 50px;
    /** 水平居中 */
    text-align: center;
    background: linear-gradient(to right,
        var(--green),
        var(--info));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    .url {
      font-size: 15px;
    }
  }

  .content {
    padding: 0px;
    /** 水平居中 */
    margin: 0 auto;
    /** 垂直居中 */
    position: relative;
    /** 设置宽度 */
    width: 66%;
    /** 内部元素横向排列 */
    display: flex;
    /** 主轴方向 */
    flex-direction: row;
    /** 主轴对齐方式 */
    justify-content: center;
    /** 交叉轴对齐方式 */
    align-items: center;
    /** 可以转行 */
    flex-wrap: wrap;

    .card {
      /** 边框 */
      border: 1px solid var(--white);
      /** 边框圆角 */
      border-radius: 10px;
      /** 边框宽度 */
      border-width: 1px;
      /** 边框颜色 */
      border-color: var(--white);
      /** 边框阴影 */
      box-shadow: 0 0 6px var(--white);
      /** 设置宽度 */
      width: 200px;
      /** 设置高度 */
      height: 50px;
      /** 设置背景颜色 */
      background-color: #374151;
      /** 设置字体颜色 */
      color: #000000;
      padding: 10px;
      margin: 10px;

      .card-name {
        font-size: 15px;
        /** 设置字体颜色 */
        color: var(--white);
        cursor: pointer;
      }

      .card-name:hover {
        color: var(--green);
      }

      .card-data {
        font-size: 15px;
        color: var(--green);
        font-weight: bold;
        margin-left: 5px;
      }

      .card-state {
        float: right;
        border-radius: 50%;
        /** 设置宽度 */
        width: 10px;
        /** 设置高度 */
        height: 10px;
        /** 设置背景颜色 */
        background-color: var(--white);
        margin: 5px;
      }

      .card-state-green {
        float: right;
        border-radius: 50%;
        /** 设置宽度 */
        width: 10px;
        /** 设置高度 */
        height: 10px;
        /** 设置背景颜色 */
        background-color: var(--success);
        margin: 5px;
      }

      .card-info {
        font-size: 12px;
        margin-top: 6px;
        color: var(--info);
      }
    }

    .card:hover {
      box-shadow: 0 0 10px var(--green);
      transform: scale(1.05);
      border-color: var(--green);
      font-weight: bold;
      /** 动画时间 */
      transition: all 0.3s;
    }
  }

  .footer {
    /** 水平居中 */
    text-align: center;
    width: 100%;
    color: var(--info);
    background-color: var(--black);
    font-size: 15px;
  }
}

@media screen and (max-width: 768px) {
  .viewpage {
    .content {
      padding: 0px;
      width: 100%;
      /**一排放两个card */
      flex-wrap: wrap;

      .card {
        width: 150px;
        padding: 10px;
        margin: 5px;
      }
    }
  }
}
</style>
